<template>
    <div class="tag-container" :class="tagContainerClass">
        <span class="tag-text"
              :class="tagTextClass">{{title||''}}</span>
        <div v-if="!disabled">
            <close v-if="theme==='default'" @click="close" class="tag-close" width="10px" height="10px"></close>
            <CloseWhite v-else @click="close" class="tag-close" width="10px" height="10px"></CloseWhite>
        </div>
    </div>
</template>

<script>
    import close from './icon-close.vue'
    import CloseWhite from './icon-close-white.vue'

    export default {
        name: "tag",
        props: {
            title: {
                type: String,
            },
            theme: {
                type: String,
                default: 'default'
            },
            disabled: { // 是否禁用
                type: Boolean,
                default: false
            },
        },
        components: {
            close,
            CloseWhite
        },
        inject: ['inputTag'],
        created() {
            this.inputTag.tags.push(this)
        },
        computed: {
            tagContainerClass() {
                const basicClass = 'tag-container'
                let clazz = []
                let className = basicClass
                if (this.theme === 'dark') {
                    className = className + '-dark'
                    clazz.push(className)
                }
                if (this.disabled) {
                    className = className + '-disabled'
                    clazz.push(className)
                }
                if (!this.disabled && this.focused) {
                    clazz.push(basicClass + '-hover')
                }
                return clazz
            },
            tagTextClass(){
                const basicClass = 'tag-text'
                let clazz = []
                let className = basicClass
                if (this.theme === 'dark') {
                    className = className + '-dark'
                    clazz.push(className)
                }
                if (this.disabled) {
                    className = className + '-disabled'
                    clazz.push(className)
                }
                if (!this.disabled && this.focused) {
                    clazz.push(basicClass + '-hover')
                }
                return clazz
            }
        },
        methods: {
            close() {
                this.$emit('close')
            }
        }
    };
</script>

<style scoped>
    .tag-container {
        display: inline-block;
        padding: 0 7px;
        width: auto;
        background: #fafafa;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        cursor: default;
        position: relative;
    }

    .tag-container-disabled {
        background: #fafafa;
        color: rgba(0, 0, 0, 0.33);
        cursor: not-allowed;
    }

    .tag-container-dark {
        background: #ffffff0a;
        border: 1px solid #303030;
    }

    .tag-container-dark-disabled {
        background: #2a2a2a;
        border: 1px solid #303030;
        cursor: not-allowed;
    }

    .tag-text {
        margin-right: 12px;
        word-break: break-all;
        font-size: 14px;
        color: rgba(0, 0, 0, .65);
        transition: margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .tag-text-disabled {
        color: rgba(0, 0, 0, 0.33);
        margin: 0px 6px;
    }

    .tag-text-dark {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.65)
    }

    .tag-text-dark-disabled {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.33);
        margin: 0px 6px;
    }

    .tag-container .tag-close {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        margin-left: 3px;
        color: rgba(0, 0, 0, .45);
        cursor: pointer;
        transition: all .3s cubic-bezier(.78, .14, .15, .86);
    }
</style>
